<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="app-main" type="border-card">
      <el-tab-pane label="基本设置" name="0">
        <div class="tab-pane-item">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium">
            <el-form-item label="网站名称" prop="field101">
              <el-input
                v-model="formData.field101"
                placeholder="请输入网站名称"
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
            <el-form-item label="客服热线" prop="field102">
              <el-input
                v-model="formData.field102"
                placeholder="请输入客服热线"
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
            <el-form-item label="商务合作" prop="field103">
              <el-input
                v-model="formData.field103"
                placeholder="请输入商务合作"
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
            <el-form-item label="统计代码" prop="field104">
              <el-input
                v-model="formData.field104"
                type="textarea"
                placeholder="请输入统计代码"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              />
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="短信设置" name="1">
        <div class="tab-pane-item">
          <el-form
            ref="messageElForm"
            :model="messageFormData"
            :rules="messageRules"
            size="medium"
          >
            <el-form-item
              
              label="短信请求URL"
              prop="field101"
            >
              <el-input
                v-model="messageFormData.field101"
                placeholder="请输入短信请求URL"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="Accesskey" prop="field102">
              <el-input
                v-model="messageFormData.field102"
                placeholder="请输入Accesskey"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item  label="Secret" prop="field103">
              <el-input
                v-model="messageFormData.field103"
                placeholder="请输入Secret"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item  label="签名" prop="field104">
              <el-input
                v-model="messageFormData.field104"
                placeholder="请输入签名"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
            <el-form-item
              
              label="短信模板编号"
              prop="field105"
            >
              <el-input
                v-model="messageFormData.field105"
                placeholder="请输入短信模板编号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      activeName: "0",
      formData: {
        field101: "",
        field102: undefined,
        field103: undefined,
        field104: undefined,
      },
      rules: {
        field101: [
          {
            required: true,
            message: "请输入网站名称",
            trigger: "blur",
          },
        ],
        field102: [],
        field103: [],
        field104: [],
      },
      messageFormData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field104: undefined,
        field105: undefined,
      },
      messageRules: {
        field101: [],
        field102: [],
        field103: [],
        field104: [],
        field105: [],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    messageSubmitForm() {
      this.$refs[" messageElForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    messagerResetForm() {
      this.$refs["messageElForm"].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.app-main {
  max-width: 800px;
}
.tab-pane-item {
  padding: 0 20px;
  display: flex;
  justify-content: center;
  text-align: center;
  ::v-deep .el-form {
    width: 100%;
  }
}
</style>
